<template>
    <div class="tab-bar-item" @click='itemClick'>
        <div v-if="isActive">
            <slot name="tab-bar-active"></slot>
        </div>
        <div v-else>
            <slot name='tar-bar'></slot>
        </div>
        <div :style='colorPink' class="text">
            <slot name='tar-bar-text'></slot>
        </div>
    </div>
</template>

<script>
export default {
    props:{
        path:{
            type:String
        }
    },
    data () {
        return {
           
        }
    },
    methods: {
        itemClick(){
            //路由器对象中有跳转路由的方法
            this.$router.push(this.path)
        }
    },
    computed: {
        isActive:function(){
            return this.path===this.$route.path
        },
        colorPink(){
            return this.isActive?{color:'pink'}:''
        }
       
       
    }
};
</script>

<style lang="less" scoped>
.tab-bar-item{
    flex: 1;
    
}


</style>

